<template>
  <section class="py-16 bg-gradient-to-r from-primary/10 to-secondary/10">
    <div class="container mx-auto px-4">
      <div class="max-w-3xl mx-auto text-center">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-serif font-bold mb-4">分享你的生活小 Life</h2>
        <p class="mb-8 text-neutral-700">
          如果你也有生活中的温暖瞬间、美好发现或者触动心灵的小故事，欢迎与我分享。<br>
          每一个平凡的故事都值得被看见，每一束光都值得被记录。
        </p>

        <div class="bg-white rounded-2xl p-8 shadow-sm text-center max-w-4xl mx-auto">
          <h3 class="text-xl font-bold mb-4">联系我</h3>
          <p class="text-neutral-600 mb-8">
            准备好分享你的故事了吗？选择你喜欢的方式联系我吧
          </p>
          
          <div class="grid md:grid-cols-2 gap-6 max-w-2xl mx-auto mb-8">
            <!-- 邮箱投稿 -->
            <div class="bg-gradient-to-br from-primary/5 to-primary/10 rounded-xl p-6">
              <div class="flex items-center justify-center gap-3 mb-4">
                <i class="fa fa-envelope text-2xl text-primary"></i>
                <h4 class="font-bold">邮箱投稿</h4>
              </div>
              <p class="text-sm text-neutral-600 mb-4">
                发送邮件到我的邮箱，详细描述你的投稿内容
              </p>
              <div class="space-y-3">
                <div class="text-xs text-neutral-500 bg-white/80 px-3 py-2 rounded-lg">
                  life.shiguang@gmail.com
                </div>
                <button @click="copyEmail"
                  class="w-full bg-primary hover:bg-primary/90 text-white py-2 rounded-lg text-sm transition-colors">
                  {{ emailCopied ? '已复制邮箱!' : '复制邮箱地址' }}
                </button>
              </div>
            </div>

            <!-- 微信联系 -->
            <div class="bg-gradient-to-br from-secondary/5 to-secondary/10 rounded-xl p-6">
              <div class="flex items-center justify-center gap-3 mb-4">
                <i class="fa fa-wechat text-2xl text-secondary"></i>
                <h4 class="font-bold">微信联系</h4>
              </div>
              <p class="text-sm text-neutral-600 mb-4">
                添加我的微信，可以更方便地交流和分享
              </p>
              <div class="space-y-3">
                <div class="text-xs text-neutral-500 bg-white/80 px-3 py-2 rounded-lg">
                  lifeshiguang11
                </div>
                <button @click="copyWechat"
                  class="w-full bg-secondary hover:bg-secondary/90 text-white py-2 rounded-lg text-sm transition-colors">
                  {{ wechatCopied ? '已复制微信!' : '复制微信号' }}
                </button>
              </div>
            </div>
          </div>

          <div class="p-4 bg-neutral-50 rounded-lg">
            <p class="text-xs text-neutral-500">
              💌 收到投稿后，我会仔细阅读每一份内容，并在3个工作日内回复。<br>
              优质内容将在征得作者同意后，以合适的形式分享到 Life 拾光。
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const emailCopied = ref(false)
const wechatCopied = ref(false)

// 复制邮箱地址
const copyEmail = async () => {
  try {
    await navigator.clipboard.writeText('life.shiguang@gmail.com')
    emailCopied.value = true
    setTimeout(() => {
      emailCopied.value = false
    }, 2000)
  } catch (err) {
    // 降级方案
    const textArea = document.createElement('textarea')
    textArea.value = 'life.shiguang@gmail.com'
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    emailCopied.value = true
    setTimeout(() => {
      emailCopied.value = false
    }, 2000)
  }
}

// 复制微信号
const copyWechat = async () => {
  try {
    await navigator.clipboard.writeText('lifeshiguang11')
    wechatCopied.value = true
    setTimeout(() => {
      wechatCopied.value = false
    }, 2000)
  } catch (err) {
    // 降级方案
    const textArea = document.createElement('textarea')
    textArea.value = 'lifeshiguang11'
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    wechatCopied.value = true
    setTimeout(() => {
      wechatCopied.value = false
    }, 2000)
  }
}
</script>